<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>

    <link rel="stylesheet" href="./layui.css">
    <script src="./layui.js"></script>
    <script src="../7月15日js系列周五/com.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100%;
            width: 100%;
            /* 弹性盒子模型 */
            background: #ADA996;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        /* 导航栏 */
        .home-nav {
            background: linear-gradient(45deg, #8da5ba, #778b9d);
            box-shadow: 8px -8px 16px #9fa6ac,
                -8px 8px 16px #a4afb9;
        }

        .layui-nav .userInfo {
            float: right;
        }

        .layui-nav-bar {
            background-color: #9eb9d1;
        }

        /* 新闻详情 */
        .news-content {
            width: 600px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px;
     
            margin-top: 20px;
        }

        .news-discuss {
            width: 600px;
            height: 300px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .news-discuss textarea {
            width: 600px;
            height: 200px;
            resize: none;

        }

        .news-discuss .layui-btn {
            background: #b5b1a1;
            float: right;
        }
    </style>
</head>

<body>
    <div class="home-nav">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">导航</a></li>

            <li class="layui-nav-item userInfo"><a href="">登录</a></li>
        </ul>
    </div>
    <h1>新闻标题</h1>
    <!-- 新闻详情 -->
    <div class="news-content">


    </div>

    <!-- 新闻评论 -->
    <div class="news-discuss">
        <textarea cols="30" rows="10"></textarea>
        <button class="layui-btn addComment" type="button">立即发布评论</button>
        
    </div>
    <ol class="news-discuss-ol" style="margin-top: 20px; width: 610px; margin-left: auto; margin-right: auto;">
        <li>
            <div class="cmment-content">评论内容</div>
            <div class="comment-edit">
                <button>点赞</button>
                <button>删除</button>
            </div>
        </li>
    </ol>
</body>

</html>
<script>
    // 获取用户登录信息  传递的名称需要与设置的名称一致
    // 目前取出的userInfo 可能是JSON格式的字符串 也可能是空
    let userInfo = getCookie('userInfo')?JSON.parse(getCookie('userInfo')):null;

    if(userInfo){
        // 登录状态
        document.querySelector('.userInfo').innerHTML = `${userInfo.mobile} 用户欢迎`
    }else{
        document.querySelector('.userInfo').innerHTML = '<a href="login.html">登录</a>'
    }
    // 获取到新闻ID
    const newsId = getUrlParam('id');
    ajax({
        url:'http://phpclub.org.cn/edu/server/getContent.php',
        data:{id:newsId},
        success:function(response){
            // 显示信息内容
            document.querySelector('h1').innerHTML = response.data.title;
            document.querySelector('.news-content').innerHTML = response.data.content
        }
    })
    // 发布评论
    document.querySelector('.addComment').onclick = function(){
        if(!userInfo){
            // 说明用户目前没有登录  跳转到登录页
            // encodeURIComponent是js中内置函数 将字符串转换为URL编码格式 
            location.href = 'login.html?callback='+encodeURIComponent(location.href);
            return;
        }
        // 说明用户已经登录
        ajax({
            url:'http://phpclub.org.cn/edu/server/addComment.php',
            type:'post',
            data:{userId:userInfo.id,newsId,content:document.querySelector('textarea').value},
            success: function(backData){
                console.log(backData)
            }
        });
    }

    // 评论列表
    let data ={newsId,page:1,pageSize:15} 
    if(userInfo){
        // 用户登录
        data.userId = userInfo.id;
    }
    ajax({
        url:'http://phpclub.org.cn/edu/server/getComment.php',
        data,
        success:function(response){
            let html = '';
            response.data.forEach(item=>{
                html += `<li>
                    <div class="cmment-content">${item.content}</div>
                    <div class="comment-edit">
                        <button>点赞</button>
                        <button>删除</button>
                    </div>
                </li>`
            })
            document.querySelector('.news-discuss-ol').innerHTML = html;
        }
    })

</script>